<script setup lang="ts">
import { onMounted, ref ,onUnmounted} from 'vue'
import type { ScrollbarInstance } from 'element-plus'
import {Calendar,View,Search,Star,ChatLineSquare,Download,Platform} from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { User,Close } from '@element-plus/icons-vue'
import ToolsPand from './viewPatr/ToolsPand.vue'
const dialogVisible = ref(false)
type Arrayable<T> = T | T[]

const max = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<ScrollbarInstance>()
const isPageHeadShow=ref(false)
const isLoginFrom=ref(true)

const handleWheel = (event: WheelEvent) => {
  // 检测滚动方向
  if (event.deltaY > 0) {
    // 向下滚动，pageIndex 加 1
    if(pageIndex.value<=3){
      pageIndex.value++;
    }
  } else {
    // 向上滚动，pageIndex 减 1
    pageIndex.value--;
  }
    if (pageIndex.value >= 1) {
    isPageHeadShow.value = true;
  } else {
    isPageHeadShow.value = false;
  }
  // 确保 pageIndex 不小于 0
  pageIndex.value = Math.max(pageIndex.value, 0);
  console.log(pageIndex.value)
  if(pageIndex.value===2){
    getUserCountBydayFun()
    getInfoFun()
    getArticleRankFun()
  }
  else if(pageIndex.value===3){
    getLessmessageListFun()
    getLeaveMessageInfoFun()
  }
  // 触发滚动
  scrollToPage();
};

const scrollToPage = () => {
  // 确保 scrollbarRef 已正确引用 DOM 元素
  if (scrollbarRef.value) {
    // 滚动到指定位置
    scrollbarRef.value.scrollTo({
      top: pageIndex.value * window.innerHeight,
      behavior: 'smooth', // 平滑滚动
    });
  }
};

const scrollToPageByIndexToSmooth = (index) => {
  pageIndex.value = index;
  if (pageIndex.value >= 1) {
    isPageHeadShow.value = true;
  } else {
    isPageHeadShow.value = false;
  }
 
  // 确保 scrollbarRef 已正确引用 DOM 元素
  if (scrollbarRef.value) {
    // 滚动到指定位置
    scrollbarRef.value.scrollTo({
      top: index * window.innerHeight,
      behavior: 'smooth', // 平滑滚动
    });
  }
};

const scrollToPageByIndex=(index)=>{
  if (pageIndex.value >= 1) {
    isPageHeadShow.value = true;
  } else {
    isPageHeadShow.value = false;
  }
  if(index===2){
    getUserCountBydayFun()
    getInfoFun()
    getArticleRankFun()
  }
  if (scrollbarRef.value) {
    // 滚动到指定位置
    scrollbarRef.value.scrollTo({
      top: index * window.innerHeight,
    });
  }
}

const user=ref({
  id:'',
  username:'',
  password:'',
  password1:'',
  email:'',
  imagePath:'',
  status:'',
  code:'',
})

const activeName = ref('first')

import { getCode } from '@/api/user'
import { ElMessage } from 'element-plus'
const isDisabled=ref(false)// 控制按钮是否禁用
const buttonText=ref("获得验证码") // 按钮显示的文本
const countdown=ref(60) // 倒计时时间
async function getCoteRest() {
      // 验证是否为空
      if (!user.value.email) {
        alert("邮箱不能为空");
        return;
      }

      // 验证邮箱格式是否正确
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(user.value.email)) {
        alert("邮箱格式不正确");
        return;
      }

      // 禁用按钮并开始倒计时
      isDisabled.value = true;
      buttonText.value = `${countdown.value}秒后重试`;
      
      const result=await getCode(user.value.email)
      console.log(result)
      if(result.code===1){
        ElMessage.success('验证码发送成')
      }
      else{
        ElMessage.error(result.msg)
      }

      // 60s等待（倒计时逻辑）
      const countdownInterval = setInterval(() => {
        countdown.value--;
        buttonText.value = `${countdown.value}秒后重试`;

        if (countdown.value <= 0) {
          clearInterval(countdownInterval);
          isDisabled.value = false; // 解除按钮禁用
          buttonText.value = "获得验证码";
          countdown.value = 60; // 重置倒计时
        }
      }, 1000);
    }

    import { register } from '@/api/user'

    const registerUser = async () => {
      const result=await register(user.value)
      console.log(result)
      if(result.code===1){
        ElMessage.success('注册成功')
        user.value={
          id:'',
          username:'',
          password:'',
          password1:'',
          email:'',
          imagePath:'',
          status:'',
          code:'',
        }
        dialogVisible.value=false
      }
      else{
        ElMessage.error(result.msg)
      }
    }
    import Cookies from 'js-cookie';
    import { login,loginByToken } from '@/api/user'
    const isUserLogin=ref(false)
    import { useRoute } from 'vue-router'
    const route = useRoute();
    const loginUser = async () => {
      const result=await login(user.value)
      console.log(result)
      if(result.code===1){
        ElMessage.success('登录成功')
        user.value=result.data
        dialogVisible.value=false
        isUserLogin.value=true
        // 将用户信息存储到Cookies中
        console.log(result.data.token)
        Cookies.set('myToken', JSON.stringify(result.data.token));
      }
      else{
        ElMessage.error(result.msg)
      }
    }

  async function loginByTokenFun(){
    const result=await loginByToken()
    if(result.code===1){

        user.value=result.data
        dialogVisible.value=false
        isUserLogin.value=true
    }
  }

    import { getArticleList,getArticleCount } from '@/api/article'

    const articleList=ref([])
    const articleCount=ref(0)
    const pageIndexFun=ref(0)
    const pageSize=ref(6)
    

    async function getArticleListFun(){
      const result=await getArticleList(pageIndexFun.value,pageSize.value)
      // console.log(result)
      if(result.code===1){
        articleList.value=result.data
      }
      else{
        ElMessage.error(result.msg)
      }
    }

    async function getArticleCountFun(){
      const result=await getArticleCount()
      if(result.code===1){
        articleCount.value=result.data
      }
      else{
        ElMessage.error(result.msg)
      }
    }
    
    function changeArticList(){
      getArticleListFun()
      getArticleCountFun()
      // console.log(articleCount.value)
      // console.log(articleList.value)
    }
    const activeNameBOF=ref('article')

    // 定义 handleTabClick 方法
function handleTabClick(tab: { name: string }, event: Event) {
  console.log(tab);
  if (tab === 'article') {
    changeArticList();
  }
  else if (tab === 'last') {
    getLastArticleListFun();
  }
}

import { useRouter } from 'vue-router';
const router = useRouter();
import { watch } from 'vue';
// 获取路由参数 id
const pageIndex = ref(parseInt(route.params.index, 10) || 0);
import { addUserAction } from '@/api/user'

import { getUserCountByday } from '@/api/user'
// 模拟访问量数据
const viewCounts = ref([0, 0, 0, 0, 0, 0, 0]); // 替换为实际访问量数据
async function getUserCountBydayFun(){
  const result=await getUserCountByday()
  if(result.code===1){
    viewCounts.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}

const webInfo=ref({})
import { getInfo } from '@/api/article'

async function getInfoFun(){
  const result=await getInfo()
  if(result.code===1){
    webInfo.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}

onMounted(() => {
  console.log(pageIndex.value)
  scrollToPageByIndex(pageIndex.value)
  getLastArticleListFun()
  loginByTokenFun()
  addUserAction()
})

// 监听 nowPageindex 的变化，并更新路由参数
watch(pageIndex, (newIndex) => {
      // 更新路由参数，同时保持平滑滚动
      router.push({ name: 'index', params: { index: newIndex } });
    });

function toArticleById(id:string){
  router.push({ name: 'article', params: { id } });
}

const tabActiveName=ref('last')

import { getLastArticleList } from '@/api/article'

const lastPageIndex=ref(1)
const lastPageSize=ref(10)

async function getLastArticleListFun(){
  const result=await getLastArticleList(lastPageIndex.value,lastPageSize.value)
  if(result.code===1){
    articleList.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}

function exitLoginFun(){
  Cookies.remove('myToken');
  isUserLogin.value=false
}


import { computed } from 'vue'
import * as echarts from 'echarts';

// 获取近七日的日期
const getRecentDays = (days) => {
  const dates = [];
  const now = new Date();
  for (let i = 0; i < days; i++) {
    const date = new Date(now.getTime() - i * 24 * 3600 * 1000);
    const day = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    dates.push(day);
  }
  return dates.reverse();
};

const recentDays = ref(getRecentDays(7));

// ECharts 配置
const option = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none',
    }
  },
  xAxis: [
    {
      type: 'category',
      data: recentDays.value,
      axisLine: {
        lineStyle: {
          color: '#000000'
        }
      },
      axisLabel: {
        color: '#000000'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#000000'
        }
      },
      axisLabel: {
        color: '#000000'
      }
    }
  ],
  series: [ 
    {
      name: '访问量',
      type: 'line',
      data: viewCounts.value,
      color: '#409eff',
    }
  ],
  grid: {
    width: '90%',
    top: '4%',
    left: '3%',
    right: '4%',
    bottom: '4%',
    containLabel: true
  }
}));


import { getArticleRank, getArticleLastRank , getArticleLikeRank } from '@/api/article'
const articleRank=ref([])
async function getArticleRankFun(){
  const result=await getArticleRank()
  if(result.code===1){
    articleRank.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}
const articleLastRank=ref([])
async function getArticleLastRankFun(){
  const result=await getArticleLastRank()
  if(result.code===1){
    articleLastRank.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}
const articleLikeRank=ref([])
async function getArticleLikeRankFun(){
  const result=await getArticleLikeRank()
  if(result.code===1){
    articleLikeRank.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}

const rankType=ref('first')

function rankTabClick(tab: { name: string }, event: Event) {
  console.log(tab.paneName);
  console.log(tab, event)
  if (tab.paneName === 'first') {
    getArticleRankFun();
  }
  else if (tab.paneName === 'second') {
    getArticleLikeRankFun();
  }
  else if (tab.paneName === 'third') {
    getArticleLastRankFun();
  }
}

const chartDom = ref(null);
import china from '../assets/china.json'

onMounted(() => {
  const chart = echarts.init(chartDom.value); // 初始化 ECharts 实例
  echarts.registerMap('china', china); // 注册地图

  const option = {
    series: [
      {
        name: '中国',
        type: 'map',
        map: 'china',
        label: {
          show: false,
        },
        itemStyle: {
        // 设置地图轮廓线颜色
        borderColor: '#409eff', // 蓝色轮廓线
        borderWidth: 1,         // 轮廓线宽度
        borderType: 'solid',    // 轮廓线类型（实线）
        areaColor: '#ffffff',   // 地图填充颜色（白色）
      },
      emphasis: {
        label: {
          show: true,             // 高亮时显示省份名称
          color: '#000000',       // 省份名称字体颜色（黑色）
          fontSize: 12,           // 字体大小
        },
        // 高亮样式
        itemStyle: {
          borderColor: '#409eff', // 高亮时轮廓线颜色
          borderWidth: 1,
          areaColor: '#409eff',   // 高亮时填充颜色
        },
        }
      },
    ],
  };

  chart.setOption(option); // 设置 ECharts 配置
});

function show_leave_message(){
  if(!isUserLogin.value){
    ElMessage.error('请先登录')
  }  
  else{
    message_dialogVisible.value=true
  }
}

const message_dialogVisible=ref(false)
const message_data=ref({
  content:'',
  backcolor:'#89C3FF'
})

import { addLessmessage,getLessmessageList } from '@/api/Lessmessage'

async function addLessmessageFun(){
  const result=await addLessmessage(message_data.value)
  if(result.code===1){
    ElMessage.success('留言成功')
    message_data.value={
      content:'',
      backcolor:'#89C3FF'
    }
    message_dialogVisible.value=false
  }
  else{
    ElMessage.error(result.msg)
  }
}

const lessmessageList=ref([])

async function getLessmessageListFun(){
  const result=await getLessmessageList()
  if(result.code===1){
    lessmessageList.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}


const allLessmessageCount=ref([])

import { getLeaveMessageInfo } from '@/api/Lessmessage'

async function getLeaveMessageInfoFun(){
  const result=await getLeaveMessageInfo()
  if(result.code===1){
    allLessmessageCount.value=result.data
  }
  else{
    ElMessage.error(result.msg)
  }
}
</script>

<template>
  <div class="page-head" v-if="isPageHeadShow">
    <div class="page-head-logo">落叶无痕的个人博客</div>
    <div class="pahe-head-item" @click="scrollToPageByIndexToSmooth(0)">首页</div>
    <div class="pahe-head-item" :class="pageIndex==1?'page-head-local':''" @click="scrollToPageByIndexToSmooth(1)">作品集</div>
    <div class="pahe-head-item" :class="pageIndex==2?'page-head-local':''" @click="scrollToPageByIndexToSmooth(2)">学习记录</div>
    <div class="pahe-head-item" :class="pageIndex==3?'page-head-local':''" @click="scrollToPageByIndexToSmooth(3)">留言墙</div>
    <div class="pahe-head-item" :class="pageIndex==4?'page-head-local':''" @click="scrollToPageByIndexToSmooth(4)">网站导航</div>
    <div v-if="isUserLogin">
      <el-dropdown placement="top-start">
        <div class="page-head-login">{{user.username[0]}}</div>
        <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-if="user.role==='1'" @click="router.push({ name: 'manage' });"><el-icon><Platform /></el-icon>管理中心</el-dropdown-item>
          <el-dropdown-item><el-icon><User /></el-icon>个人中心</el-dropdown-item>
          <el-dropdown-item @click="exitLoginFun"><el-icon><Close /></el-icon>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </div>
    <div v-else class="page-head-login" @click="dialogVisible = true">登录</div>
  </div>
  <el-scrollbar ref="scrollbarRef" style="height: 100vh;" class="hidden-scrollbar" always  @wheel="handleWheel">
    <div class="page" style="position: relative;">
      <video autoplay muted loop id="bg-video" style="position: absolute;height: 100%; z-index: -1;">
        <source src="/src/vido/总_compressed.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <div class="bg-logo" style="position: absolute; z-index: 111; top: 0; left: 0; width: 100%;">
        <div style="width: 100%;height: 100%;">
          <div class="bg-title">落叶无痕的个人博客</div>
          <div class="bg-by">代码编织异世界，技术开启新次元</div>
          <div class="bg-go">出发</div>
        </div>
      </div>
    </div>
    <div class="page dome-show-page">
      <div class="dome-show-page-left">
        <div class="dome-show-page-left-image"></div>
        <div class="dome-show-page-left-item">
          <div class="dome-show-page-left-item-click">1</div>
          <div class="dome-show-page-left-item-click">1</div>
          <div class="dome-show-page-left-item-click">1</div>
        </div>
      </div>
      <div class="dome-show-page-r">
        <div class="dome-show-page-r-title">
          <div style="width: 72%;font-size: 2vh;font-weight: 600;line-height: 6vh;">某木材厂生产系统开发</div>
          <div style="width: 28%;height: 6vh;display: flex;flex-direction: column;justify-content: end;font-size: 1.2vh;">2024.06—至今</div>
        </div>
      <div class="dome-show-page-r-tip">项目职责：Java 开发工程师</div>
      <div class="dome-show-page-r-tip">项目简介：</div>
      <div style="font-size:large;">
        为企业开发一个木材生产加工信息管理系统。该系统涵盖员工管理，库存管理，生产文件管理等功能，旨在提升 企业的生产效率和管理信息化水平。
      </div>
      <div class="dome-show-page-r-tip">项目成果：</div>
      <div style="font-size: large;">
        使用 Apache PDFBox 和 Apache POI,通过设计，生成符合生产标准的 PDF 和 XLSX 生产文件。
        增加订单部件，五金件，用户自定义参数的数据库维护功能。
        增加生产进度可视化模块，通过进度条等方式展示订单的生产进度，方便管理人员实时监控。
        根据提供的页面原型实现完整的前端交互页面；生成的文件格式符合企业标准，合格率 95%以上。
      </div>
      <div class="dome-show-page-r-tip">项目链接：</div>
      </div>
    </div>
    <div class="page article-page">
      <div class="article-page-left">
        <div class="article-data-title">博客活力:</div>
        <div class="article-data-card">
          <div class="article-data-card-item">
            <div class="article-data-card-item-title">总浏览数</div>
            <div class="article-data-card-item-data">{{webInfo.allViewCount}}</div>
          </div>
          <div class="article-data-card-item">
            <div class="article-data-card-item-title">总访问数</div>
            <div class="article-data-card-item-data">{{webInfo.allCount}}</div>
          </div>
          <div class="article-data-card-item">
            <div class="article-data-card-item-title">总点赞数</div>
            <div class="article-data-card-item-data">{{webInfo.allLikeCount}}</div>
          </div>
        </div>
        <div class="article-data-title">进七日博客访问量：</div>
        <div class="article-data-daytable">
          <e-charts class="datachart" :option="option" />
        </div>
        <div class="article-data-title">博客文章排行：</div>
        <div class="article-data-ph">
          <el-tabs stretch="true" v-model="rankType" @tab-click="rankTabClick">
            <el-tab-pane label="综合" name="first">
              <div class="article-data-ph-item">
                <div class="article-data-ph-item-show" v-for="(index,item) in articleRank" @click="toArticleById(index.id)">
                  <div>{{item+1}}</div>
                  <div>{{ index.title }}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="最热" name="second">
              <div class="article-data-ph-item">
                <div class="article-data-ph-item-show" v-for="(index,item) in articleLikeRank" @click="toArticleById(index.id)">
                  <div>{{item+1}}</div>
                  <div>{{ index.title }}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="最新" name="third">
              <div class="article-data-ph-item">
                <div class="article-data-ph-item-show" v-for="(index,item) in articleLastRank" @click="toArticleById(index.id)">
                  <div>{{item+1}}</div>
                  <div>{{ index.title }}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="article-page-center">
        <el-tabs v-model="tabActiveName" type="border-card" class="demo-tabs"  @tab-change="handleTabClick">
          <el-tab-pane label="最近" name="last">
            <div class="article-page-center-show">
              <div class="article-page-center-show-frist-secend">
                <div class="article-item" v-for="item in articleList" @click="toArticleById(item.id)">
                  <div class="article-item-image">
                    <img :src="'/public/image/'+item.imagePath" alt="" style="width: 100%;">
                  </div>
                  <div class="article-item-info">
                    <div class="article-item-info-top">{{item.title}}</div>
                    <div class="article-item-info-center">文章描述</div>
                    <div class="article-item-info-bottom">
                      <div class="article-item-info-bottom-icon"><el-icon><Calendar /></el-icon></div>
                      <div>发布日期：</div>
                      <div class="article-item-info-bottom-data">{{ item.createdTime }}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><View /></el-icon></div>
                      <div>阅读总数：</div>
                      <div class="article-item-info-bottom-data">{{item.viewCount}}</div>
                      <div class="article-item-info-bottom-icon">
                        <el-icon>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Like-1--Streamline-Core" height="14" width="14"><desc>Like 1 Streamline Icon: https://streamlinehq.com</desc><g id="like-1--reward-social-up-rating-media-like-thumb-hand"><path id="Union" fill="#747474" fill-rule="evenodd" d="M4.41074 12.9614c0.33597 0.1601 0.70344 0.2432 1.07562 0.2432l5.34604 0c1.2317 0 2.2798 -0.897 2.47 -2.1138l0.6259 -4.00329c0.1896 -1.213 -0.7483 -2.30892 -1.976 -2.30892l-3.28374 0 0 -2.35762c0 -0.8976 -0.72765 -1.625248 -1.62525 -1.625248 -0.5883 0 -1.13068 0.317918 -1.41809 0.831238L3.54788 5.33703c-0.12537 0.2239 -0.1912 0.47621 -0.1912 0.73282l0 5.44245c0 0.5783 0.33252 1.1052 0.85463 1.354l0.19943 0.0951ZM1.04363 5.52027c-0.264251 0 -0.517678 0.10497 -0.704531 0.29182 -0.186853 0.18686 -0.2918263 0.44028 -0.2918263 0.70453l5e-7 5.11258c0 0.2643 0.1049728 0.5177 0.2918258 0.7046 0.186852 0.1868 0.440279 0.2918 0.704531 0.2918l0.00021 0 0.49636 -0.0002c0.27606 -0.0001 0.49978 -0.224 0.49978 -0.5l0 -6.10534c0 -0.13265 -0.05271 -0.25986 -0.14652 -0.35363 -0.09382 -0.09378 -0.22105 -0.14643 -0.35369 -0.14637l-0.49614 0.00021Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                        </el-icon>
                      </div>
                      <div>点赞总数：</div>
                      <div class="article-item-info-bottom-data">{{item.likeCount}}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><ChatLineSquare /></el-icon></div>
                      <div>评论总数：</div>
                      <div class="article-item-info-bottom-data">{{item.commentCount}}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><Star /></el-icon></div>
                      <div>收藏总数：</div>
                      <div class="article-item-info-bottom-data">{{item.commentCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="文章" name="article">
            <div class="article-page-center-show">
              <div class="article-page-center-show-frist">
                <div style="width: 30vw;margin-right: 1vw;"><el-input></el-input></div>
                <el-button :icon="Search" type="primary">搜索</el-button>
              </div>
              <div class="article-page-center-show-frist-secend">
                <div class="article-item" v-for="item in articleList" @click="toArticleById(item.id)">
                  <div class="article-item-image">
                    <img :src="'/public/image/'+item.imagePath" alt="" style="width: 100%;">
                  </div>
                  <div class="article-item-info">
                    <div class="article-item-info-top">{{item.title}}</div>
                    <div class="article-item-info-center">文章描述</div>
                    <div class="article-item-info-bottom">
                      <div class="article-item-info-bottom-icon"><el-icon><Calendar /></el-icon></div>
                      <div>发布日期：</div>
                      <div class="article-item-info-bottom-data">{{ item.createdTime }}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><View /></el-icon></div>
                      <div>阅读总数：</div>
                      <div class="article-item-info-bottom-data">{{item.viewCount}}</div>
                      <div class="article-item-info-bottom-icon">
                        <el-icon>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" id="Like-1--Streamline-Core" height="14" width="14"><desc>Like 1 Streamline Icon: https://streamlinehq.com</desc><g id="like-1--reward-social-up-rating-media-like-thumb-hand"><path id="Union" fill="#747474" fill-rule="evenodd" d="M4.41074 12.9614c0.33597 0.1601 0.70344 0.2432 1.07562 0.2432l5.34604 0c1.2317 0 2.2798 -0.897 2.47 -2.1138l0.6259 -4.00329c0.1896 -1.213 -0.7483 -2.30892 -1.976 -2.30892l-3.28374 0 0 -2.35762c0 -0.8976 -0.72765 -1.625248 -1.62525 -1.625248 -0.5883 0 -1.13068 0.317918 -1.41809 0.831238L3.54788 5.33703c-0.12537 0.2239 -0.1912 0.47621 -0.1912 0.73282l0 5.44245c0 0.5783 0.33252 1.1052 0.85463 1.354l0.19943 0.0951ZM1.04363 5.52027c-0.264251 0 -0.517678 0.10497 -0.704531 0.29182 -0.186853 0.18686 -0.2918263 0.44028 -0.2918263 0.70453l5e-7 5.11258c0 0.2643 0.1049728 0.5177 0.2918258 0.7046 0.186852 0.1868 0.440279 0.2918 0.704531 0.2918l0.00021 0 0.49636 -0.0002c0.27606 -0.0001 0.49978 -0.224 0.49978 -0.5l0 -6.10534c0 -0.13265 -0.05271 -0.25986 -0.14652 -0.35363 -0.09382 -0.09378 -0.22105 -0.14643 -0.35369 -0.14637l-0.49614 0.00021Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                        </el-icon>
                      </div>
                      <div>点赞总数：</div>
                      <div class="article-item-info-bottom-data">{{item.likeCount}}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><ChatLineSquare /></el-icon></div>
                      <div>评论总数：</div>
                      <div class="article-item-info-bottom-data">{{item.commentCount}}</div>
                      <div class="article-item-info-bottom-icon"><el-icon><Star /></el-icon></div>
                      <div>收藏总数：</div>
                      <div class="article-item-info-bottom-data">{{item.commentCount}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="article-page-center-show-frist" style="display: flex;flex-direction: row;">
                <div style="width: 25%;">搜索结果：{{ articleCount }}</div>
                <div style="width: 50%;display: flex;flex-direction: row;justify-content: center;">
                  <el-pagination background layout="prev, pager, next" :total="articleCount" />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="资源" name="others">
            <div class="article-page-center-show">
              <div class="article-page-center-show-frist">
                <div style="width: 30vw;margin-right: 1vw;"><el-input></el-input></div>
                <el-button :icon="Search" type="primary">搜索</el-button>
              </div>
              <div class="article-page-center-show-frist-secend">
                <div v-for=" n in 12" class="others-item">
                  <div class="others-item-type">[ZIP]</div>
                  <div class="others-item-name"><a href="#">开发工程师（简历）.zip</a></div>
                  <div class="others-item-info">发布日期：2025-04-22 19:35:21&nbsp;&nbsp;&nbsp;&nbsp;下载量：</div>
                  <div class="others-item-down">0</div>
                </div>
              </div>
              <div class="article-page-center-show-frist" style="display: flex;flex-direction: row;">
                <div style="width: 25%;">搜索结果：{{ articleCount }}</div>
                <div style="width: 50%;display: flex;flex-direction: row;justify-content: center;">
                  <el-pagination background layout="prev, pager, next" :total="articleCount" />
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="page">
      <div class="message-page">
        <div class="message-page-main">
          <div class="message-page-content">
            <div class="message-page-content-item" v-for="item in lessmessageList" :style="{ backgroundColor: item.backcolor }">
              <div class="message-page-content-item-content">{{ item.content }}</div>
              <div class="message-page-content-item-info">
                <div style="width: 60%;">{{ item.createdTime }}</div>
                <div style="text-align: right;width: 40%;">落款：{{ item.userName }}</div>
              </div>
            </div>
          </div>
          <div class="message-page-data">
            <div class="message-page-data-pie">
              <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;感谢大家的热情留言，截至2025-04-23 11:24:11为止，来自11个省份，34个城市的网友，累计留言数量达到{{allLessmessageCount}}次。</div>
              <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎各位留言，海内存知己，天涯若比邻。愿与各位未曾谋面的朋友们一起交流技术，分享知识或者讲述一些不愿与熟人分享的事。</div>
              <div>落款：落叶无痕</div>
            </div>
            <div ref="chartDom" class="message-page-data-map"></div>
          </div>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: center;width: 68vw;">
          <div style="line-height: 5vh;">
            <el-button type="primary" style="width: 10vw;" @click="show_leave_message()">发表留言</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <div class="my-page">
        <div class="my-page-main"><ToolsPand/></div>
        <div class="my-page-bomttom"></div>
      </div> 
    </div>
  </el-scrollbar>
  <el-dialog
    v-model="dialogVisible"
    title="欢迎来到落叶无痕的个人博客"
    width="360"
  >
    <div class="login-title"><span @click="isLoginFrom=true">登录</span> | <span @click="isLoginFrom=false">注册</span></div>
    <div v-if="isLoginFrom">
      <el-from>
        <el-form-item style="width: 320px;" label="用户邮箱：" prop="name">
          <el-input placeholder="请输入已注册邮箱" v-model="user.email"/>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <el-form-item style="width: 320px;" label="用户密码：" prop="name">
          <el-input placeholder="请输入正确密码" type="password" v-model="user.password"/>
        </el-form-item>
        <el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 220px;margin: 0px 70px;" type="primary" @click="loginUser">登录</el-button>
        </el-form-item>
      </el-from>
    </div>
    <div v-else>
      <el-from>
        <el-form-item style="width: 320px;" label="用户邮箱：" prop="name">
          <el-input v-model="user.email" placeholder="请输入正确邮箱"/>
        </el-form-item>
        <el-form-item style="width: 320px;" label="用户名称：" prop="name">
          <el-input v-model="user.username" placeholder="请输入用户姓名"/>
        </el-form-item>
        <el-form-item style="width: 320px;" label="用户密码：" prop="name">
          <el-input v-model="user.password" type="password" placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item style="width: 320px;"  label="确认密码：" prop="name">
          <el-input v-model="user.password1" style="width: 320px;" type="password" placeholder="请确认用户密码"/>
        </el-form-item>
        <el-form-item label="验&nbsp证&nbsp码&nbsp：" prop="name">
          <el-input v-model="user.code" style="width: 120px;margin-right: 20px;" placeholder="请输入验证码"/><el-button style="width: 100px;" @click="getCoteRest" :disabled="isDisabled">{{buttonText}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 220px;margin: 0px 70px;" type="primary" @click="registerUser">注册</el-button>
        </el-form-item>
      </el-from>
    </div>
  </el-dialog>
  <el-dialog
    v-model="message_dialogVisible"
    title="感谢各位留言"
    width="500"
  >
    <div>
      <div class="message_dialogVisible_item">
        <span class="demonstration">便签颜色：</span>
        <el-color-picker v-model="message_data.backcolor" />
      </div>
      <div class="message_dialogVisible_item">便签内容：</div>
      <div class="message_dialogVisible_item">
        <el-input
          v-model="message_data.content"
          :rows="2"
          type="textarea"
          maxlength="100"
          show-word-limit
          placeholder="请输入留言内容"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="message_dialogVisible = false">取消</el-button>
        <el-button type="primary"  @click="addLessmessageFun()">
          确认留言
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
@font-face {
        font-family: 'ttf-01'; /* 自定义字体名称 */
        src: url('/src/ttf/TTF01.ttf') format('truetype'); /* 字体文件路径和格式 */
        font-weight: normal; /* 字体粗细 */
        font-style: normal; /* 字体样式 */
    }
.page {
  height: 100vh;
  position: relative; /* 确保每个页面都可以作为定位上下文 */
}
#bg-video{
  width: 100vw;
}
.page-head{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 6vh;
  background-color: #fff;
  z-index: 444;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgb(218, 218, 218);
}
.bg-logo {
  background-color: rgba(0, 0, 0, 0.55); /* 使用rgba方便调整透明度 */
  color: white; /* 文字颜色建议为白色，以便在深色背景上显示 */
  display: flex;
  height: 100vh;
}

.bg-title{
  height: 6vh;
  line-height: 6vh;
  margin: 0vh 1vw;
  font-size: 3vh;
  font-family: "ttf-01";
  cursor: pointer;
}
.bg-by{
  margin: 31vh 0vw;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
  font-size: 5vh;
  font-family: "ttf-01";
}
.bg-go{
  width: 10vw;
  margin: 10vh 45vw;
  height: 6vh;
  border: 1px solid #fff;
  text-align: center;
  line-height: 6vh;
  font-size: 2.5vh;
  cursor: pointer;
  font-weight: 600;
}
.bg-go:hover{
  border: 1px solid #409eff;
  color: #409eff;
}
.page-head-logo{
  height: 6vh;
  width: 20vw;
  padding: 0px 1vw;
  line-height: 6vh;
  font-size: 3vh;
  font-family: "ttf-01";
  cursor: pointer;
}
.pahe-head-item{
  line-height: 6vh;
  width: 6vw;
  text-align: center;
  font-size: 1.5vh;
  cursor: pointer;
}
.pahe-head-item:nth-child(2){
  margin-left: 44vw;
}
.pahe-head-item:hover{
  font-weight: 600;
  color: #409eff;
}
.page-head-login{
  margin: 1vh;
  width: 4vh;
  height: 4vh;
  background-color: #409eff;
  border-radius: 2vh;
  text-align: center;
  line-height: 4vh;
  font-size: 1.5vh;
  color: #fff;
  cursor: pointer;
}
.page-head-local{
  color: #409eff;
}
.dome-show-page{
  display: flex;
  flex-direction: row;
  height: 94vh;
  padding: 6vh 0px 0px 0px;
}
.dome-show-page-left{
  width: 70vw;
  height: 94vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.dome-show-page-left-image{
  width: 68vw;
  margin: 1vw;
  height: 68vh;
  background-color: #409eff;
}
.dome-show-page-left-item{
  width: 68vw;
  margin: 1vw;
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: right;
}
.dome-show-page-left-item-click{
  width: 8vh;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
  border: 4px #409eff00 solid;
  border-radius: 8px;
  margin: 1vh;
  cursor: pointer;
}
.dome-show-page-left-item-click:hover{
  border: 4px #409eff solid;
}
.dome-show-page-r{
  width: 28vw;
  height: 80vh;
  margin: 4vh 1vw;
}
.dome-show-page-r-title{
  display: flex;
  flex-direction: row;
  height: 6vh;
}
.dome-show-page-r-tip{
  height: 4vh;
  line-height: 4vh;
  font-size:large;
  font-weight: 600;
}
.article-page{
  display: flex;
  flex-direction: row;
  height: 94vh;
  padding: 6vh 0px 0px 0px;
}
.article-page-left{
  width: 20vw;
  margin: 2vh 0vw;
  margin-left: 1vw;
  height: 90vh;
  height: 90vh;
}
.article-page-center{
  width: 78vw;
  margin: 2vh 1vw;
  background-color: #409eff;
}
.login-title{
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}
.login-title>span{
  cursor: pointer;
}
.login-title>span:hover{
  color: #409eff;
  border-bottom: 1px solid #409eff;
}
.article-data-card{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.article-data-card-item{
  width: 6vw;
  text-align: center;
  height: 12vh;
}
.article-data-card-item:nth-child(2){
  margin: 0vh 1vw;
}
.article-data-title{
  height: 4vh;
  line-height: 4vh;
  padding:0px 1vw ;
}
.article-data-daytable{
  margin: 0px 1vw;
  height: 26vh;
  
}
.article-data-ph{
  margin: 0px 1vw;
  height: 38vh;
}
.article-data-ph-item{
  width: 100%;
  height: 32vh;
  margin: 4px;
}
.article-data-ph-item-show{
  height: 3.8vh;
  line-height: 3.8vh;
  border-bottom: 1px solid rgb(218, 218, 218);
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.article-data-ph-item-show>div:nth-child(1){
  width: 2.8vh;
  line-height: 2.8vh;
  margin: 0.5vh;
  text-align: center;
  background-color: #ededed;
  color: #666;
  margin-right: 2vh;
}
.article-data-ph-item-show:nth-child(1)>div:nth-child(1){
  background-color: #bf2c24;
  color: #fff;
}
.article-data-ph-item-show:nth-child(2)>div:nth-child(1){
  background-color: #e67225;
  color: #fff;
}
.article-data-ph-item-show:nth-child(3)>div:nth-child(1){
  background-color: #e6bf25;
  color: #fff;
}
.article-page-center-show{
  height: 83vh;
}
.article-page-center-show-frist{
  display: flex;
  flex-direction: row;
  margin: 1vh;
  height: 2h;
}
.article-page-center-show-frist-secend{
  height: 75vh;
  margin: 0vh 1vh;
}
.article-item{
  width: 100%;
  height: 12vh;
  border-bottom:1px solid rgb(218, 218, 218);
  display: flex;
  flex-direction: row;
  cursor: pointer;
}
.article-item-image{
  margin: 1.5vh 1vh;
  width: 16vh; 
  height: 9vh;
  background-color: #409eff;
}
.article-item-info{
  margin: 1.5vh 0vh;
  width: 16vh; 
  height: 9vh;
  flex: 1;
}
.article-item-info-bottom{
  height: 2vh;
  line-height: 2vh;
  color: rgb(116, 116, 116);
  font-size: 1.5vh;
  display: flex;
  flex-direction: row;
}
.article-item-info-top{
  height: 3vh;
  line-height: 3vh;
  font-weight: 600;
  width: 100%;
}
.article-item-info-top:hover{
  color: #409eff;
}
.article-item-info-center{
  height: 4vh;
  color: rgb(116, 116, 116);
  font-size: 1.5vh;
}
.article-item-info-bottom-icon{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}
.article-data-card-item-data{
  height: 10vh;
  line-height: 10vh;
  font-size: 2vh;
  font-weight: 600;
}
.article-data-card-item-title{
  width: 80%;
  margin: 0px 10%;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  height: 3vh;
  line-height: 3vh;
}
.message-page{
  width: 98vw;
  height: 10vh;
  margin: 8vh 0vw 1vw 1vw;
  height: 90vh;
}
.message-page-main{
  width: 100%;
  height: 85vh;
  display: flex;
}
.message-page-content{
  width: 68vw;
  display: flex;
  flex-wrap: wrap;
}
.message-page-data{
  width: 30vw;
  background-color: #fff;
}
.message-page-data-pie{
  height: 45vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.message-page-data-pie>div{
  height: 10vh;
  margin: 0vh 1vw;
}
.message-page-data-pie>div:nth-child(3){
  text-align: right;
}
.message-page-data-map{
  height: 40vh;
}
.my-page{
  width: 100%;
  height: 100vh;
}
.my-page-main{
  width: 98vw;
  margin-left: 1vw;
  height: 82vh;
}
.my-page-bomttom{
  width: 100vw;
  height: 18vh;
  background-color: rgb(0, 0, 0,0.9);
}
.user-menu{
  position: fixed;
  top: 7vh;
  right: 1vh;
  width: 150px;
  height: 80px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 4px 0px;
  border: 1px solid rgb(216, 216, 216);
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}
.user-menu-item{
  text-align: center;
  height: 40px;
  line-height: 40px;
  padding: 0px 4px;
  cursor: pointer;
}
.user-menu-item:hover{
  color:#409eff;
  background-color: #eef6ff;
}
.datachart{
  width: 100%;
  height: 100%;
}
.message-page-content-item{
  width: 24%;
  height: 32%;
  background-color:#409eff22;
  margin: 0px 0.2vw;
  border: 1px solid rgb(189, 189, 189);
}
.message-page-content-item-content{
  height: 90%;
  margin: 0px 2%;
}
.message-page-content-item-info{
  display: flex;flex-direction:row;justify-content:space-around;
}
.message_dialogVisible_item{
  margin: 10px 0px;
}
.others-item{
  height: 5vh;
  border-bottom: 1px solid #dbdbdb;
  margin: 1vh 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.others-item-type{
  width: 5%;
  text-align: center;
  color: #adadad;
}
.others-item-name{
  width: 67%;
}
.others-item-down{
  width: 3%;
  text-align: right;
  color: #adadad;
}
.others-item-info{
  color: #adadad;
}
.others-item-name>a{
  text-decoration: none;
  color: black;
}
.others-item-name>a:hover{
  text-decoration: underline;
  color: #409eff;
}
</style> 